<template>
<div class="ResetPwd">
    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width=100>
        <Form-item>
        </Form-item>
        <Form-item label="当前密码:" prop="CurrentPasswd">
            <Input type="password" v-model="formCustom.CurrentPasswd" placeholder="请输入当前使用的密码"></Input>
        </Form-item>
        <Form-item label="修改密码:" prop="passwd">
            <Input type="password" v-model="formCustom.passwd" placeholder="请输入修改的密码"></Input>
        </Form-item>
        <Form-item label="确认密码:" prop="passwdCheck">
            <Input type="password" v-model="formCustom.passwdCheck" placeholder="请再次输入密码"></Input>
        </Form-item>
        <Form-item>
            <Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
        </Form-item>
    </Form>
</div>
</template>
<script>
    export default {
        data () {
            const validateCurrentPasswd=(rule,value,callback)=>{
                if(value==='')
                {
                    callback(new Error('请输入当前密码'));
                }
                else{
                    callback();
                }
            }
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入修改密码'));
                } else {
                    if (this.formCustom.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formCustom.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if (value !== this.formCustom.passwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };     
            return {
                formCustom: {
                    CurrentPasswd:'',
                    passwd: '',
                    passwdCheck: '',
                    age: ''
                },
                ruleCustom: {
                    CurrentPasswd:[
                        {validator:validateCurrentPasswd,trigger:'blur'}
                    ],
                    passwd: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('好大胆子,改密码!');
                    } else {
                        this.$Message.error('认真点，好好输入!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>